<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<uni-nav-bar left-icon="back" @clickLeft="goback" @clickRight="gosubmit" left-text="" title="上报困人"></uni-nav-bar>
		<uni-card>
			<view class="choose" @click="goSelectElevator">
				<view class="input">{{name}}</view>
				<uni-icons type="arrowright"></uni-icons>
			</view>

		</uni-card>
		<uni-card>
			<view class="choose">
				<input class="input" placeholder-class="coleles" v-model="tiringFloor" type="number" placeholder="请输入困人楼层" />
				<text>层</text>
			</view>
		</uni-card>
		<!-- 多选 -->
		<uni-card>
			<view class="uni-list">
				<checkbox-group style="width: 50%;" v-for="(item,index) in list_type" :key="item.value" @change="checkboxChange($event,index)">
					<label class="uni-list-cell uni-list-cell-pd">
						<view>
							<checkbox :value="item.value" :checked="item.checked" style="transform: scale(0.8);" color="#1B5DBE" />
						</view>
						<view>{{item.dictLabel}}</view>
					</label>
				</checkbox-group>
			</view>
		</uni-card>

		<!-- 备注 -->
		<uni-card>
			<view class="comment">
				<!-- <input class="input-comment" type="text" value="备注：" placeholder="备注"/> -->
				<fuck-textarea v-model="remark" placeholder="备注:" maxlength="100"></fuck-textarea>
			</view>
		</uni-card>

		<button type="default" @click="gosubmit">提交</button>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	import fuckTextarea from '@/components/fuck-textarea/fuck-textarea.vue'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import submit from "@/serve/api/submit.js"
	export default {
		components: {
			uniCard,
			fuckTextarea,
			uniNavBar
		},
		data() {
			return {
				name: '选择电梯',
				tiringFloor: '', //困人楼层
				remark: '', //备注
				pageNum: 1,
				getListFlag: true,
				flag: true,
				list_type: [],
				elevatorId: '',
			}
		},
		onLoad(e) {
			// if (e.elevatorId) {
			// 	this.elevator_name(e.elevatorId)
			// }
			this.genre()

		},
		methods: {
			//选择电梯
			async elevator_name(elevatorId) {
				const res = await submit.elevatorBaseInfo({
					elevatorId: elevatorId,
				});
				this.name = res.data.data.elevatorName
				this.elevatorId = res.data.data.elevatorId
			},
			//困人类型
			async genre() {
				let parme = {
					code: "business_tiring_cause"
				}
				const res = await submit.searchDictionList(parme);
				// console.log('5655', res)
				this.list_type = res.data.data
			},

			// 导航返回
			goback() {
				uni.navigateBack({

				})
			},
			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},

			// 选中
			checkboxChange: function(e, ind) {
				this.list_type[ind].selectStatus = !this.list_type[ind].selectStatus;
			},

			// 选择电梯接口调用 elevatorInfo/findCommunityByToken
			goSelectElevator() {
				uni.navigateTo({
					url: '/pages/tabbar/polling/searchResult/searchResult?type=' + 1,
				})

			},

			// 接口调用
			async gosubmit() {
				if (this.name == '选择电梯' || this.name == '') {
					uni.showToast({
						title: '请添加电梯',
						icon: 'none'
					})
					return
				}
				if (this.tiringFloor == '') {
					uni.showToast({
						title: '请输入困人楼层',
						icon: 'none'
					})
					return
				}
				var outsideTask = []
				for (var i = 0; i < this.list_type.length; i++) {
					if (this.list_type[i].selectStatus != false) {
						outsideTask.push(this.list_type[i].dictCode)
					}
				}
				if (outsideTask.length == 0) {
					uni.showToast({
						title: '请选择被困类型',
						icon: 'none'
					})
					return
				}
				// if (this.remark == '') {
				// 	uni.showToast({
				// 		title: '请输入备注',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				let parme = {
					elevatorId: this.elevatorId,
					tiringFloor: this.tiringFloor,
					tiringCause: outsideTask,
					remark: this.remark,
				}
				const res = await submit.reportElevatorTiring(parme)
				if (res.data.code == 0) {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					//// #ifdef APP-PLUS
					uni.switchTab({
						url: "/pages/tabbar/home/home"
					})
					//// #endif
					// // #ifdef H5
					// uni.reLaunch({
					// 		url:"/pages/tabbar/home/home"
					// })
					// // #endif
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}

			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	page {
		width: 750rpx;
		background: #EFF2F5;
		overflow: hidden;
	}

	view {
		font-size: 28rpx;
		line-height: 1.8;

	}

	.uni-card {
		width: 670rpx;
		/* height: 96rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		border: none;
		margin: 0 auto;
		margin-top: 10px;

	}

	.choose {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		text-align: center;
	}

	.input {
		text-align: left;
	}

	/* 多选框 */
	.checkbox {
		width: 16rpx;
		height: 16rpx;
		background: #FFFFFF;
		border: 1rpx solid #E2E6EF;
		box-shadow: 3rpx 3rpx 2rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 4rpx;
		transform: scale(0.1);
	}

	.wraper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		/* height: 100px; */
	}

	.uni-list-cell {
		display: flex;
		flex-direction: row;

	}

	.uni-label-pointer {
		width: 100%;
	}

	.uni-label-pointer view {
		font-size: 24rpx;

	}

	/* 备注 */
	.comment {
		width: 100%;
		/* height: 226rpx; */
		background: #FFFFFF;
		border-radius: 16rpx;
		border: none;
	}

	.input-comment {
		/* height:226rpx; */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		font-size: 24rpx;
		color: #ADB5C5;
	}

	.coleles {
		color: #323232;
		font-size: 13px;
	}

	.uni-list {
		display: flex;
		flex-wrap: wrap;

	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: transparent;
	}

	button {
		width: 670rpx;
		height: 52px;
		background: #017EFE;
		box-shadow: 0px 5px 7px 0px rgba(1, 126, 254, 0.2);
		border-radius: 26px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 52px;
		margin: 50px auto 34px;
	}
</style>
